<template>
  <div class="app-container">
    <Form v-if="showSearch" v-model:formData="searchInfo" :formItems="formItems">
      <template #footer>
        <div style="text-align: left">
          <el-button size="small" icon="Search" type="primary" @click="goSearch">搜索</el-button>
          <el-button size="small" icon="Refresh" @click="resetSearch">重置</el-button>
        </div>
      </template>
    </Form>
    <h3></h3>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"> </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="resetSearch"></right-toolbar>
    </el-row>
    <h3>
      <!--  -->
      <el-button type="primary" icon="Edit" plain @click="changeMore" size="small"
        v-hasPermi="['member:apply:changeMore']" :disabled="!checkList.length">批量处理</el-button>
    </h3>
    <!-- 提现统计 -->
    <el-row :gutter="40" class="panel-group">
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">提现总金额</div>
            <span class="card-panel-num">{{ info.sum_money }}</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">成功金额</div>
            <span class="card-panel-num">{{ info.sum_real_money }}</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">失败金额</div>
            <span class="card-panel-num">{{ info.fail_money }}</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-money">
            <svg-icon icon-class="money" class-name="card-panel-icon" />
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">处理中金额</div>
            <span class="card-panel-num">{{ info.ing_money }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <x-table :propList="propList" :tableData="info.items" :isLoading="isLoading" isShowCheckBox
      @selection-change="selectionChange">
      <template #headimgurl="{ row }">
        <img :src="row.user.headimgurl" style="width: 60px; height: 60px" alt="" />
      </template>
      <template #status="{ row }">
        <el-tag type="success" v-if="row.status == 3">打款成功</el-tag>
        <el-tag type="danger" v-if="row.status == 4">打款失败</el-tag>
        <el-tag type="info" v-if="row.status == 2">打款中</el-tag>
        <el-tag v-if="row.status == 1">待打款</el-tag>
      </template>
      <template #op="{ row }">
        <!-- v-if="row.status == 1" -->
        <el-button v-if="row.status == 1" type="primary" link v-hasPermi="['member:apply:changeStatus']" icon="Edit"
          @click="change(row)">处理提现</el-button>
        <!--  -->
        <el-button v-if="row.img" type="primary" link v-hasPermi="['api:apply:getApplyDetail']" icon="View"
          @click="lookDetail(row)">查看凭证</el-button>
        <!-- :loading="lookLoading" -->
      </template>
    </x-table>
    <pagination v-show="info.total > 0" :total="info.total" v-model:page="searchInfo.pageNum"
      v-model:limit="searchInfo.pageSize" @pagination="getInfo" />

    <Dialog width="40%" :title="dialogConfig.title" v-model:isShowDialog="isShowDialog" @confirm="submit"
      :isLoading="dialogLoading">
      <Form ref="formRef" v-bind="dialogConfig.formConfig">
        <template #num>
          <span style="color: red">（注意：自动打款是使用你提现打款配置的微信支付打款至粉丝的零钱,不配置或没开通该功能可选择手动打款）</span>
        </template>
        <template #userinfo>
          <!-- <span style="color: red"
              >（注意：自动打款是使用你提现打款配置的微信支付打款至粉丝的零钱,不配置或没开通该功能可选择手动打款）</span
            > -->
          <div style="display: flex; align-items: center">
            <img :src="dialogConfig.formConfig.formData.user.headimgurl" alt="" style="width: 40px; height: 40px" />
            <span style="margin: 0 15px">{{
              dialogConfig.formConfig.formData.user.nickname
            }}</span>
            <h4 style="color: red">
              {{ dialogConfig.formConfig.formData.money }}
            </h4>
          </div>
        </template>
        <template #img>
          <!-- <ImgUpload
              width="120"
              :uploadImgUrl="uploadImgUrl"
              :value="dialogConfig.formConfig.formData.img_show"
              @input="imgSuccess"
              @remove="remove"
              :limit="1"
            ></ImgUpload> -->
          <ImageUpload v-if="isShowDialog" :uploadImgUrl="uploadImgUrl"
            v-model:value="dialogConfig.formConfig.formData.img_show" @input="imgSuccess" :limit="1">
            <!-- :extParams="{ appid: $store.getters.curMpInfo.appid }" -->
            <template #tip>
              <div class="el-upload__tip">
                只能上传jpg,png,jpeg,gif文件，且不超过500kb
              </div>
            </template>
          </ImageUpload>
          <span>支持png、jpeg、jpg,gif,svg格式</span>
        </template>
      </Form>
    </Dialog>
    <Dialog width="40%" :title="dialogConfig2.title" v-model:isShowDialog="isShowDialog2" @confirm="submitMore"
      :isLoading="dialogLoading">
      <Form ref="formRef2" v-bind="dialogConfig2.formConfig">
        <template #num>
          <span>{{ checkList.length }}
            <span style="color: red">（注意：勾选包括已处理的状态此次修改将不会生效）</span></span>
        </template>
        <!-- <template #img>
            <ImageUpload
              v-if="isShowDialog"
              :uploadImgUrl="uploadImgUrl"
              v-model:value="dialogConfig2.formConfig.formData.img_show"
              @input="imgSuccess"
              :limit="1"
            >
              <template #tip>
                <div class="el-upload__tip">
                  只能上传jpg,png,jpeg,gif文件，且不超过500kb
                </div>
              </template>
            </ImageUpload>
            <span>支持png、jpeg、jpg,gif,svg格式</span>
          </template> -->
      </Form>
    </Dialog>
    <el-dialog title="凭证" v-model="isShowDetail" width="300px" :center="true">
      <el-image :src="pz_img" style="width: 200px; height: 200px; margin: 10px auto"
        :preview-src-list="[pz_img]"></el-image>
      <!-- <span #footer class="dialog-footer"> </span> -->
    </el-dialog>
  </div>
</template>

<script>
const baseUrl =
  import.meta.env.VITE_APP_ENV == "development"
    ? import.meta.env.VITE_APP_BASE_API
    : window.location.origin;
import {
  propList,
  formItems,
  dialogConfig,
  send_this,
  dialogConfig2,
} from "./config";
import {
  changeStatus,
  changeMore,
  getList,
  getApplyDetail,
} from "@/api/platform/applyMoney";
// import ImgUpload from "@/components/ImageUpload";
import { uploadImgUrl } from "@/api/mpManage/mpUpload";
import { getAllList as listAllCustomer } from "@/api/platform/merchant";

import { ElMessage, ElMessageBox } from "element-plus";

export default {
  name: "platformapplyindex",
  //   components: { ImgUpload },
  data() {
    return {
      dialogConfig2,
      isShowDialog2: false,
      uploadImgUrl,
      isShowDetail: false,
      //   uploadImgUrl: "",
      curItem: {},
      showSearch: true,
      isShowDialog: false,
      propList,
      formItems,
      dialogConfig,
      isLoading: true,
      dialogLoading: false,
      info: {},
      searchInfo: {
        pageNum: 1,
        pageSize: 10,
        created_at: this.getTimeFilterDefault(true),
      },
      pz_img: "",
      lookLoading: false,
      checkList: [],
    };
  },
  computed: {},
  created() {
    console.log(this.dialogConfig.title);
    send_this(this);

    // this.uploadImgUrl = baseUrl + "/api/v1/uploadFile";
    this.init();
  },
  mounted() { },
  methods: {
    init() {
      this.getInfo();
      this.getCustomerList();
    },
    getCustomerList() {
      listAllCustomer().then((response) => {
        // this.customerList = response.data;
        this.formItems.forEach(item => {
          if (item.prop == 'sys_user_id') {
            item.options = response.data
          }
        })
      });
    },
    async getInfo() {
      this.isLoading = true;
      const params = { ...this.searchInfo };
      const { data } = await getList(params);
      this.info = data;
      this.isLoading = false;
    },
    // 查看凭证
    async lookDetail(item) {
      this.lookLoading = true;
      try {
        const { data } = await getApplyDetail(item.id);
        console.log(data);
        this.pz_img = data.img_url;
        this.isShowDetail = true;
      } finally {
        this.lookLoading = false;
      }
    },
    submitMore() {
      this.$refs.formRef2.validate(async (valid) => {
        if (valid) {
          console.log(this.dialogConfig2.formConfig.formData);
          this.dialogLoading = true;
          const params = this.dialogConfig2.formConfig.formData;
          console.log(this.checkList);
          const id = this.checkList.map((item) => item.id);
          params.id = id;

          try {
            await changeMore(params);
            this.$message.success("操作成功");
            this.getInfo();
            this.isShowDialog2 = false;
          } finally {
            this.dialogLoading = false;
          }
        }
      });
    },
    radioChange(value, formItems) {
      console.log(value, formItems);
      // 手动打款
      formItems.forEach((item) => {
        if (item.prop == "img") {
          if (value == -1) {
            item.isHide = false;
          } else {
            item.isHide = true;
          }
        }
        if (item.prop == "password") {
          if (value == 3) {
            item.isHide = false;
          } else {
            item.isHide = true;
          }
        }
        if (item.prop == "fail_text") {
          if (value == 4) {
            item.isHide = false;
          } else {
            item.isHide = true;
          }
        }
      });
    },
    imgSuccess(res) {
      //   let baseUrl = null;
      //   if (process.env.NODE_ENV === "development") {
      //     baseUrl = process.env.VUE_APP_BASE_API;
      //   } else {
      //     baseUrl = window.location.origin;
      //   }
      //   this.$set(
      //     this.dialogConfig.formConfig.formData,
      //     "img_show",
      //     baseUrl + "/" + res.data
      //   );
      if (res.code != 200) {
        return false;
      }
      this.dialogConfig.formConfig.formData.img_show =
        baseUrl + "/" + res.data.url;
      console.log(baseUrl, baseUrl + "/" + res.data);
      // console.log(window.location.origin);
      // 传给后端的
      //   this.$set(this.dialogConfig.formConfig.formData, "img", res.data);
      this.dialogConfig.formConfig.formData.img = res.data.url;
    },
    remove() {
      this.dialogConfig.formConfig.formData.img_show = "";
      this.dialogConfig.formConfig.formData.img = "";

      //   this.$set(this.dialogConfig.formConfig.formData, "img", "");
      //   this.$set(this.dialogConfig.formConfig.formData, "img_show", "");
    },
    resetSearch() {
      this.searchInfo = this.$options.data.call(this).searchInfo;
      this.searchInfo.created_at = this.getTimeFilterDefault(true);
      this.getInfo();
    },
    change(item) {
      this.dialogConfig.formConfig.formData = { ...item };
      this.isShowDialog = true;
    },
    changeMore() {
      this.isShowDialog2 = true;
      this.dialogConfig2.formConfig.formData = {};
      this.$nextTick(() => {
        this.$refs.formRef2.resetFields();
      });
    },
    submit() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          console.log(this.dialogConfig.formConfig.formData);
          this.dialogLoading = true;
          const params = this.dialogConfig.formConfig.formData;
          try {
            let res = await changeStatus(params);
            console.log(res);
            this.$message.success("操作成功");
            this.getInfo();
            this.isShowDialog = false;
          } catch (e) {
            // console.log(e);
            // ElMessageBox.confirm(e.msg, "提示", {
            //   confirmButtonText: "确定",
            //   cancelButtonText: "取消",
            //   type: "error",
            // })
            //   .then(() => {
            //     this.$router.push({ path: "/mp/mpConfig/applyPay" });
            //   })
            //   .catch(() => {});
          } finally {
            this.dialogLoading = false;
          }
        }
      });
    },
    selectionChange(e) {
      console.log(e);
      this.checkList = e;
    },
    goSearch() {
      // 重置时间
      this.getInfo();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep(.el-dialog--center .el-dialog__body) {
  text-align: center;
}

.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>